<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发现</title>
    <link rel="stylesheet" href="./css/common2.css">
    <link rel="stylesheet" href="./css/basep3.css">
    <link rel="stylesheet" href="../web_p2/_reset.css">
    <link rel="stylesheet" href="./font/iconfont.css">

</head>
<body>
    
    <div class="mobile_app">
        <!-- 头部 -->
        <header>
            <!-- 顶部导航 -->
        <div class="topnav">
            <!-- 返回按钮 -->
            <div class="back_btn">
                <button>Back</button>
            </div>
            <!-- 分类 -->
            <div class="clsasify_title">
                <span>分类</span>
            </div>
            <!-- 切换城市 -->
            <div class="select_city">
                <div class="select_city">
                    <select name="" id="">
                        <option value="">广州市</option>
                        <option value="">深圳市</option>
                    </select>
            </div>
        </div>
        </div>
        <!-- 搜索框 -->
        <div class="search_bar">
            <input  class="search_btn" type="text" placeholder="请输入商品名称">
           </div>
        <div class="search_recommend_title">
            <p>大家都在搜</p>
        </div> 
        <!-- 搜索推荐 -->
        <div class="search_recommend_container">
            <a href="#"><span>寿司</span> </a>
            <a href="#"><span>羽毛球</span></a>
            <a href="#"><span>火锅</span></a>
            <a href="#"><span>游泳馆</span></a>
            <a href="#"><span>电影</span></a>
            <a href="#"><span>周黑鸭</span></a>
            <a href="#"><span>KTV</span></a>
            <a href="#"><span>肯德基</span></a>
        </div>
        </header>
        <!-- 页面主体 -->
        <main>
            <!-- 热门搜索 -->
            <div class="pop_search_column">
                <!-- 热门搜索标题 -->
                <div class="pop_search_title">
                    <!-- 标题左边 -->
                    <div class="column_title_left"><img src="./img/page3/形状22.png" alt=""><p>热门搜索</p></div>
                    <!-- 标题-右边 --> 
                    <div class="column_title_right"><a href=""><p>更多</p><i class="iconfont">&#xe638;</i></a></div>
                </div>
                <!-- z照片容器 -->
                <div class="pop_piccontainer">
                    <!-- 左边图片链接 -->
                    <a href="" class="pic_left"><img src="./img/page3/图层1.png" alt=""></a>
                    <!-- 右边图片容器 -->
                    <div class="pic_right">
                        <!-- 右边顶部图片链接 -->
                        <a href="#" class="pic_top"><img src="./img/page3/图层2.png" alt=""></a>
                        <!-- 底部图片容器 -->
                        <div class="pic_bottom">
                            <a href="#" class="pic_bottom_left"><img src="./img/page3/图层3.png" alt=""></a>
                            <a href="#" class="pic_bottom_right"><img src="./img/page3/图层4.png" alt=""></a>
                        </div>
                    </div>                    
                </div>
            </div> 
            <!-- 推荐搜索 -->
            <div class="rec_search_bar">
          <div class="rec_search_title">
          <div class="title_left"><img src="./img/page3/形状16.png" alt=""><p>推荐搜索</p></div>
          <div class="title_right"><a href=""><p>更多</p><i class="iconfont">&#xe638;</i></a></div>
          </div>
         <a href="" class="rec_container"><img src="./img/page3/图层5.png" alt=""></a>
         <a href="" class="rec_container"><img src="./img/page3/图层6.png" alt=""></a>
         <a href="" class="rec_container"><img src="./img/page3/图层7.png" alt=""></a>
            </div>
            <!-- 推荐美食 -->
            <div class="rec_food_bar">
                <div class="rec_search_title">
                <div class="title_left"><img src="./img/page3/形状16.png" alt=""><p>推荐搜索</p></div>
                <div class="title_right"><a href=""><p>更多</p><i class="iconfont">&#xe638;</i></a></div>
                </div>
               <a href="" class="rec_container"><img src="./img/page3/图层5.png" alt=""></a>
               <a href="" class="rec_container"><img src="./img/page3/图层6.png" alt=""></a>
               <a href="" class="rec_container"><img src="./img/page3/图层7.png" alt=""></a>
                  </div>
        </main>
        <!-- 底部 -->
         <footer>
            <!-- 底部导航 -->
          <a href="./index.html"><i class="iconfont bottom_pic">&#xe634;</i><p>首页</p></a>
          <a href="./classify.html"><i class="iconfont bottom_pic">&#xeac4;</i><p>分类</p></a>
          <a href="./find.html"><i class="iconfont bottom_pic">&#xe8af;</i><p>发现</p></a>
          <a href="./mine.html"><i class="iconfont bottom_pic">&#xe8a0;</i><p>我的</p></a>
        </footer>
    </div>
</body>
</html>